<template>
    <div>
        <Upload type="drag" accept=".xlsx,.xls" action="" :beforeUpload="handleBeforeUploadExcel">
            <div style="padding: 20px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击或者拖曳文件到此处上传</p>
            </div>
        </Upload>
        <ul class="ivu-upload-list" v-show="hasFile">
            <li class="ivu-upload-list-file ivu-upload-list-file-finish">
                <span><i class="ivu-icon ivu-icon-stats-bars"></i>{{uploadFile.name}}</span>
                <i class="ivu-icon ivu-icon-ios-close-empty ivu-upload-list-remove" @click="removeUpload"></i>
            </li>
        </ul>
    </div>

</template>

<script>

    export default {
        name: 'HorizonUploader',
        data() {
            return {
                uploadFile: "",
            };
        },
        computed: {
            hasFile:function () {
                if(this.uploadFile) return true
                return false
            },
            file:function () {
                return this.uploadFile
            }
        },
        methods: {
            handleBeforeUploadExcel(file){
                this.uploadFile = file
                return false
            },
            removeUpload(){
                this.uploadFile=""
            },
            getFile(){
                return this.uploadFile
            },
            reset(){
                this.uploadFile=""
            }
        }
    };
</script>
